<template>
  <body>
    <header style="background:linear-gradient(to top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);width:100% ;height: 100px;line-height: 100px">

    <div class="index_title div-float">
       <div>
        <router-link :to="{ path: '/' }" style="padding-left:20px;">首页</router-link>
        <router-link :to="{ path: '/' }" style="padding-left:20px;" >哔哩哔哩</router-link>
        <router-link :to="{ path: '/' }" style="padding-left:20px;" >微博</router-link>
        <router-link :to="{ path: '/' }" style="padding-left:20px;">简介</router-link>
       </div>
    </div>
    <div class="search_title div-float">
       
       <el-input 
            placeholder="请输入内容"
            v-model="searchVal" @keyup.enter.native="onEnterSearch"
            class="input_style"
            >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input> 
    </div>
  
   
  
    <div class="user_title div-float">
       <div class="postion_info">
            <router-link :to="{ path: '/login' }"> <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3521319392,1160740190&fm=26&gp=0.jpg" class="round_icon"  alt=""></router-link>
         
       
        <router-link :to="{ path: '/login' }" style="padding-left:20px;">登录</router-link>
        <router-link :to="{ path: '/register'}" style="padding-left:20px;">注册</router-link>
       </div>
    </div>
       
    </header>
    <main style="text-align: center;width:80%;display: flex;margin:0 auto;">
        <div align="center" style="background: white;width:20%;height:1200px;">
            <div style="width:100%;height:35%;">
                <div>
                    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1095647497,3293919676&fm=26&gp=0.jpg"
                    class="img_bg">
                </div>
                <div>
                     <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3521319392,1160740190&fm=26&gp=0.jpg" class="user_img"  alt="" >
                </div>
                <div>
                     <h1>标题</h1>
                     <font>简介</font>
                     
                </div>
                <div>
                    <li>github</li>
                    <li>gitee</li>
                    <li>blog</li>
                    <li>哔哩哔哩</li>
                    <li>微博</li>

                        

                </div>
            
            </div>
            <div style="background:pink;width:100%;height:39%;margin-top:10px;" >2</div>
            <div style="background:green;width:100%;height:20%;margin-top:12px;" >3</div>
        </div>
        <div style="width: 60%;height:1800px;line-height:100px">
            <div class="wenzhang">
                <div class="w_img">
                    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1801492042,3505162591&fm=26&gp=0.jpg" class="t_img">
                  
                </div>
                   <div class="w_img">
                    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3329781631,3788661877&fm=26&gp=0.jpg" class="t_img">
                   
                </div>
                <div class="w_img">
                    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3319665910,372764751&fm=26&gp=0.jpg" class="t_img">
                   
                </div>
                <div class="w_img">
                    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=367814199,1817841556&fm=26&gp=0.jpg" class="t_img">
                   
                </div>
                <div class="w_img">
                    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3173943820,2051545519&fm=26&gp=0.jpg" class="t_img">
                   
                </div>
                <div class="w_img">
                    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=304303101,4095655696&fm=26&gp=0.jpg" class="t_img">
                   
                </div>

            </div>

        </div>
        <div align="center" style="background: white;width:20%;height:1200px;">
           <div style="width:100%;height:12%" class="gonggao">
               <div class="border_style">
                   <h3>公告栏</h3>
               </div>
                <div class="border_style1">
                 <p  valign="center"><font style="color:blue;">博客正在维护中，实时更新~</font></p>
               </div>
           </div>
            <div style="background:pink;width:100%;height:25%;margin-top:12px;" >2</div>
            <div style="background:green;width:100%;height:20%;margin-top:12px;" >3</div>
            <div style="background:green;width:100%;height:40%;margin-top:12px;" >4</div>
        </div>

    </main>
    <footer  style="background:linear-gradient(#fff1eb,#ace0f9);width:100%;text-align: center;line-height: 50px">作者:xxx</footer>
</body>
</template>
    
<script>
// import {showu,del,upone,showcom,showway,oderinfo,accpetoder} from '../api/api'
    export default {
        data(){
            return {
                msg:'你好，这里是首页',
                searchVal:''
                    
            }
        },
        //定义组建标签
        components:{

        },
        filters: {
     
　　    },
        //自定义方法
        methods:{
    
        },
        //钩子方法
        mounted:function(){
    
            console.log('这是初始化方法');

      
    
        },
        //监听属性
        watch:{
    
    
        },
        //计算属性
        computed:{
    
    
        }
    
    
    
    }
    
    
</script>
 
<style>
.t_img{
    width:100%;
    height:100%;
}
.w_img{
    height:300px;

}
.gonggao{

     background-image:url('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=194028598,3921422889&fm=26&gp=0.jpg');
    
    border-radius:5px;
}
.border_style1{
    width:100%;
    height:60%;

}
.border_style{
    
    border-bottom:thick dotted #ff0000;
    width:100%;
    height:40%;
}
li{
    float:left;
    list-style:none;
    padding-left:20px;
    padding-top:10px;
}
.img_bg{
    width:100%;
    height:40%;
}
a{
    text-decoration:none;
    color:black;
}
.postion_info{
    margin-left:10%;
}

.user_img{
    width: 80px;
    height: 80px;

    border-radius: 50%;
  
}
.round_icon{
  width: 34px;
  height: 34px;

  border-radius: 50%;
  margin-top:30px;
  
 
  float:left;

}
.input_style{
  width: 100%;
  height: 42px;
  
  
 
}
.user_title{
    
    width:30%;
    margin-left:10%;
}
.index_title{
    
    width:30%;
}
.search_title{
   
    width:30%;

}
.div-float{
    float:left;
}
 body{
    margin: 0px;
    padding: 0;
   
} 


 

</style>





